<!--  个人中心 frame  -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>个人中心 frame</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/my/my.wxss */

/* 头部 */



.h_icon {
  position: absolute;
  right: .32rem;
  top: 0;
  height: .90rem;
  width: .50rem;
  text-align: center;
  font-size: .42rem;
  color: #fff;
}

/* 用户资料区块 */

.top_box {
  position: relative;
  height: 4.50rem;
  background: linear-gradient(0deg, rgba(253, 27, 66, 1) 0%, rgba(255, 80, 45, 1) 100%);
  border-radius: 0px 0px .40rem .40rem;
}

.user_box {
  display: flex;
  align-items: center;
  margin: 0 .30rem;
}

.user_left {
  width: 1.28rem;
  height: 1.28rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
  text-align: center;
}

.user_photo {
  width: 1.20rem;
  height: 1.20rem;
  border-radius: 50%;

}

.user_right {
  margin-left: .27rem;
}

.user_phone {
  height: .28rem;
  font-size: .34rem;
  font-weight: 500;
  color: #fff;
  line-height: .30rem;
  margin-bottom: .22rem;
}

.userFlag{
  display: flex;
}

.user_rank,.platform_agent {
  width: 1.05rem;
  height: .30rem;
  line-height: .30rem;
  font-size: .22rem;
  text-align: center;
  background-color: #f6b37f;
  color: #fff;
  border-radius: .15rem;
}

.login_btn {
  height: 1.28rem;
  line-height: 1.50rem;
  font-size: .36rem;
  color: #fff;
  font-weight: 800;
  margin-left: .60rem;
}

.jifen {
  position: absolute;
  right: 0;
  top: .20rem;
  width: 1.48rem;
  height: .50rem;
  line-height: .50rem;
  font-size: .28rem;
  text-align: center;
  border-radius: .25rem 0px 0px .25rem;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* 我的订单 */

.order_box {
  margin-top: .26rem;
  margin-left: .30rem;
  width: 6.90rem;
  height: 2.20rem;
  background-color: #fff;
  border-radius: .14rem;
}

.order_bar, .Agen_bar {
  display: flex;
  height: .78rem;
  line-height: .78rem;
  margin: 0 .25rem;
  border-bottom: .01rem solid #eee;
}

.order_l_title, .Agen_l_title {
  flex: auto;
  font-size: .32rem;
  color: #222;
  font-weight: bold;
}

.order_r_box, .Agen_r_box {
  display: flex;
  align-items: center;
}

.order_r_text, .Agen_r_text {
  font-size: .24rem;
  color: #999;
  font-weight: 400;
  margin-right: .10rem;
}

.left_jiantou {
  font-size: .21rem;
  line-height: .80rem;
  color: #999;
}

.order_nav {
  display: flex;
  height: 1.41rem;
  align-items: center;
}

.order_n_item {
  position: relative;
  flex: 1;
  text-align: center;
}

.order_icon1 {
  font-size: .48rem;
  color: #000;
  margin-bottom: .14rem;
}

.order_icon2 {
  font-size: .42rem;
  color: #ff502d;
  margin-bottom: .16rem;
}

.nav_title1 {
  font-size: .24rem;
  line-height: .30rem;
  color: #999;
}

.nav_title2 {
  font-size: .24rem;
  line-height: .30rem;
  color: #666;
}

.youfengexian {
  position: absolute;
  right: -.07rem;
  top: .12rem;
  height: .70rem;
  width: .02rem;
  background: rgb(228, 138, 120, 0.5);
}

/* 服务 */

.server_box {
  position: relative;
}

.server_item {
  position: absolute;
  left: .30rem;
  top: -.50rem;
}

/* 经销商服务 */

.mr_r_40 {
  margin-right: .40rem;
}

.mr_t_40 {
  margin-top: .40rem;
}

.mr_t_30 {
  margin-top: .30rem;
}

.mr_t_20 {
  margin-top: .20rem;
}

.mr_t_25 {
  margin-top: .25rem;
}

.Agency_server {
  width: 6.90rem;
  height: 2.50rem;
  background-color: #fff;
  border-radius: .14rem;
  margin-bottom: .20rem;
}

.Agen_info {
  height: 1.71rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
}

.Agen_item {
  text-align: center;

}

.flex_1 {
  flex: auto;
  text-align: left;
}

.l_jiantou {
  font-size: .21rem;
  color: #999;
  margin-left: .10rem;
}

.price_sign {
  font-size: .38rem;
  color: #ff502d;
  font-weight: bold;
}

.price {
  font-size: .46rem;
  color: #ff502d;
  font-weight: bold;
}

.order_num, .variety_num {
  font-size: .36rem;
  color: #ff502d;
}

.Agen_order, .platform_var, .Agen_r_account {
  height: .24rem;
  line-height: .24rem;
  font-size: .24rem;
  color: #666;
}

/* 功能服务 */

.func_server {
  width: 6.90rem;
  height: 4.80rem;
  background-color: #fff;
  border-radius: .14rem;
  margin-bottom: .30rem;
}

.func_bar {
  height: .78rem;
  line-height: .78rem;
  margin: 0 .23rem;
  font-size: .32rem;
  color: #222;
  font-weight: bold;
  background: #fff;
  border-bottom: .01rem solid #eee;
}

.func_nav_box {
  display: flex;
  flex-direction: column;
}

.func_nav {
  display: flex;
  margin-top: .60rem;
}

.func_n_item {
  flex: 1;
  text-align: center;
}

.kefu {
  width: 1.80rem;
  height: .96rem;
  background: #fff;
}

.kefu_btn {
  display: flex;
  flex-direction: column;
}

.kefu::after {
  display: none;
}

.kefu_icon {
  height: .51rem;
  line-height: .51rem;
  font-size: .48rem;
  margin-bottom: .16rem;
}

.func_icon {
  font-size: .48rem;
  margin-bottom: .16rem;
}

.log_out {
  height: .80rem;
  line-height: .80rem;
  text-align: center;
  font-size: .32rem;
  color: #fff;
  background: #ff502d;
  margin-bottom: .20rem;
  border-radius: .10rem;

}
.corner {
  position: absolute;
  right: 0.3rem;
  top: -.1rem;
  min-width: .24rem;
  height: .24rem;
  line-height: .24rem;
  text-align: center;
  font-size: .20rem;
  color: #fff;
  border-radius: 50%;
  background: #ff502d;
  padding: .03rem;
}


	</style>
</head>
<body>
	<div class="content app"  v-cloak>
		<div class="top_box">
		  <div class="user_info">
		    <div class="user_box" v-if="userInfo && userInfo.id" @click="personal_Info">
		      <div class="user_left">
		        <image class="user_photo" :src="user.headimgurl"></image>
		      </div>
		      <div class="user_right">
		        <div class="user_phone">{{user.nickname}}</div>
		        <div class="userFlag">
		          <div class="user_rank" style="margin-right:.10rem;">{{huiyuan(user.membership_grade)}}</div>
		          <div v-if="user.agent" class="platform_agent">平台代理</div>
		        </div>
		      </div>
		    </div>
		    <div class="login_btn" v-else @click="TS_UserLogin()">登录/注册</div>
		  </div>
		  <div class="jifen" @click="member_jifen" data-type="jifen">会员积分</div>

		  <!-- 我的订单 -->
		  <div class="order_box">
		    <div class="order_bar" @click="personal_my_order(0)" data-type="AllOrder">
		      <div class="order_l_title ">我的订单</div>
		      <div class="order_r_box ">
		        <div class="order_r_text ">全部订单</div>
		        <div class="iconfont iconxiayibu left_jiantou "></div>
		      </div>
		    </div>
		    <div class="order_nav">
		      <div class="order_n_item" @click="personal_presell_order" data-type="presell">
		        <div class="iconfont iconyushouguanli order_icon1">
							<div v-if="user.presale_count" class="corner" >{{user.presale_count < 99 ? user.presale_count : '99+' }}</div>
		        </div>
		        <div class="nav_title1">预售订单</div>
		        <div class="youfengexian"></div>
		      </div>
		      <div class="order_n_item" @click="personal_my_order(1)" data-type="Order_s0">
		        <div class="iconfont icondaizhifu3 order_icon2">
							<div v-if="user.await_pay_count" class="corner" >{{user.await_pay_count < 99 ? user.await_pay_count : '99+' }}</div>
		        </div>
		        <div class="nav_title2">待支付</div>
		      </div>
		      <div class="order_n_item" @click="personal_my_order(2)" data-type="Order_s1">
		        <div class="iconfont icondaifahuo order_icon2">
							<div v-if="user.await_ship_count" class="corner" >{{user.await_ship_count < 99 ? user.await_ship_count : '99+' }}</div>
		        </div>
		        <div class="nav_title2">待发货</div>
		      </div>
		      <div class="order_n_item" @click="personal_my_order(3)" data-type="Order_s2">
		        <div class="iconfont iconyifahuo1 order_icon2">
							<div v-if="user.already_ship_count" class="corner" >{{user.already_ship_count < 99 ? user.already_ship_count : '99+' }}</div>
		        </div>
		        <div class="nav_title2">已发货</div>
		      </div>
		      <div class="order_n_item" @click="personal_my_order(5)" data-type="Order_s6">
		        <div class="iconfont iconshouhou order_icon2">
							<div v-if="user.refund_count" class="corner" >{{user.refund_count < 99 ? user.refund_count : '99+' }}</div>
		        </div>
		        <div class="nav_title2">退款/售后</div>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 服务 -->
		<div class="server_box">
		  <div class="server_item">
		    <!-- 经销商服务-->
		    <div v-if="userInfo && userInfo.id">
		      <div class="Agency_server" v-if="user.agent">
		        <div class="Agen_bar" @click="sigins" data-type="AgentInfo">
		          <div class="Agen_l_title ">经销商服务</div>
		          <div class="Agen_r_box ">
		            <!-- <div class="Agen_r_text ">经销商资料</div> -->
		            <!-- <div class="iconfont iconxiayibu left_jiantou"></div> -->
		          </div>
		        </div>
		        <div class="Agen_info">
							<div class="Agen_item flex_1 mr_t_30" @click="agency()">
								<div style="display:flex;	align-items: flex-end;">
									<div class="price_sign">¥</div>
									<div class="price">{{user.agent.price}}</div>
								</div>
		              <div class="Agen_r_box mr_t_20" style="width:1.60rem;">
		                <div class="Agen_r_account ">经销商账户</div>
		                <div class="iconfont iconxiayibu l_jiantou "></div>
		              </div>
		          </div>
	            <div class="Agen_item mr_r_40 mr_t_40" @click='agency_order(user.agent.id)'>
	              <div class="order_num">{{user.orderSize}}</div>
	              <div class="Agen_order mr_t_25">经销商订单(单)</div>
	            </div>
		          <div class="Agen_item mr_t_40" @click="platform_commodity" data-type="platform">
		            <div class="variety_num">{{user.productSize}}</div>
		            <div class="platform_var mr_t_25">平台商品（种）</div>
		          </div>
		        </div>
		      </div>
		    </div>

		    <!-- 功能服务 -->
		    <div class="func_server">
		      <div class="func_bar">
		        功能服务
		      </div>
		      <div class="func_nav_box">
		        <div class="func_nav">
		          <div class="func_n_item" @click="checkIn()" >
		            <div class="iconfont iconqiandao func_icon" style="color:#3F77FF"></div>
		            <div class="nav_title2">签到</div>
		          </div>
		          <div class="func_n_item" @click="my_comment" data-type="myComment">
		            <div class="iconfont iconpinglun func_icon" style="color:#FF8219"></div>
		            <div class="nav_title2">我的评论</div>
		          </div>
		          <div class="func_n_item" @click="my_coupon" data-type="myCoupon">
		            <div class="iconfont iconquan func_icon" style="color:#7D69FF"></div>
		            <div class="nav_title2">我的卷包</div>
		          </div>
		          <div class="func_n_item" @click="my_collect" data-type="myCollect">
		            <div class="iconfont iconshoucang1 func_icon" style="color:#FD1B42"></div>
		            <div class="nav_title2">我的收藏</div>
		          </div>
		        </div>
		        <div class="func_nav">
		          <div class="func_n_item" @click="my_address(false)" data-type="AddrManage">
		            <div class="iconfont icondizhi func_icon" style="color:#1FD6CF"></div>
		            <div class="nav_title2">地址管理</div>
		          </div>
		          <div class="func_n_item" @click="my_feedback" data-type="FeedBack">
		            <div class="iconfont iconyijianfankui func_icon" style="color:#FD1B42"></div>
		            <div class="nav_title2">意见反馈</div>
		          </div>
		          <div class="func_n_item" open-type="contact" session-from="my">
		              <div class="iconfont iconkefu kefu_icon" style="color:#3F77FF"></div>
		              <div class="nav_title2">在线客服</div>
		          </div>
		          <div class="func_n_item">
		            <div class="iconfont iconshezhi func_icon" style="color:#FF8219"></div>
		            <div class="nav_title2">设置</div>
		          </div>
		        </div>
		      </div>
		    </div>
		    <div class="log_out" v-if="userInfo && userInfo.id" @click="logOut">退出登录</div>
		  </div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			userInfo: {},
      user:'',
			grade:''
		},
		mounted: function(){


			this.myaddEventListener()
		},
		methods: {
			// 监听页面打开
			myaddEventListener(){
				api.addEventListener({
				    name: 'viewappear'
				}, function(ret, err) {
						vm.userInfo = localdata.get("userinfo");
						if(vm.userInfo){
							vm.getData()
						}
				});
			},
			//获取用户信息
			getData: function (){
				AjaxSafe({
						url:"/xapp/user",
						loader:false,
					success: function(res) {
						vm.user = res
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
				// 用户处理
				huiyuan(grade){
					if (grade == null || grade<2000){
					 	gradeText='普通用户'
					}
					else if (2000 <= grade<5000){
						gradeText = '黄金会员'
					}
					else if (5000 <= grade < 8000) {
						gradeText = '铂金会员'
					}
					else if (grade>=8000){
						gradeText = '钻石会员'
					}
					return gradeText
				},
				JumpPage(){},
				userinfo(){},
				// 签到
				checkIn(){
					if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
						TS_UserLogin()
						return
					}
					AjaxSafe({
				   		url:"/xapp/user/checkIn",
				    	loader:true,
						success: function(res) {
					    	api.toast({
									msg: res.msg,
									duration: 2000,
									location: 'middle'
						    })
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				},
				// 经销商服务
				sigins(){

				},
				//退出登录
				logOut(){
					api.confirm({
							title: '提示',
							msg: '您确定要退出登录吗？',
							buttons: ['确定', '取消']
					}, function(ret, err) {
							var index = ret.buttonIndex;
							if (index==1) {
								//退出登录
								localdata.del("userinfo")
								hhWin.shutall("login");
								open_UserLogin();
							}
					});
				},
		},

	});
}

</script>
</html>
